<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_loading_dialog.html">
<link rel="import" href="../../components/oobe_types.html">

<dom-module id="quick-start-element">
  <template>
    <style include="oobe-dialog-host-styles">
      svg {
        margin: 28px 14px;
      }

      #verification {
        margin: auto;
      }

      div[clr=blue] {
        color: var(--google-blue-500);
      }
      div[clr=red] {
        color: var(--google-red-500);
      }
      div[clr=green] {
        color: var(--google-green-500);
      }
      div[clr=yellow] {
        color: var(--google-yellow-500);
      }

      span {
        font-size: 22px;
      }
    </style>
    <oobe-loading-dialog id="loadingDialog" for-step="loading">
    </oobe-loading-dialog>
    <oobe-adaptive-dialog for-step="verification">
      <h1 slot="title">
        <!--TODO(https://crbug.com/1278686) Update with finalize strings -->
        Verify the shapes
      </h1>
      <div id="verification" class="layout horizontal" slot="content">
        <!-- We inline SVGs here to be able to control the color of them. -->
        <template is="dom-repeat" items="[[figures_]]">
          <div class="layout vertical center">
            <div clr$="[[item.color]]">
              <template is="dom-if" if="[[isEq_(item.shape, shapes_.CIRCLE)]]">
                <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                  <circle cx="50" cy="50" r="46" fill="currentColor">
                  </circle>
                </svg>
              </template>

              <template is="dom-if" if="[[isEq_(item.shape, shapes_.DIAMOND)]]">
                <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                  <path d="M45.793 5.746L5.749 45.789a5.96 5.96 0 0 0 0 8.429L45.793 94.26a5.96 5.96 0 0 0 8.428 0l40.044-40.043a5.96 5.96 0 0 0 0-8.429L54.22 5.746a5.96 5.96 0 0 0-8.428 0z" fill="currentColor">
                  </path>
                </svg>
              </template>

              <template is="dom-if"
                  if="[[isEq_(item.shape, shapes_.TRIANGLE)]]">
                <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_123_9159)">
                    <path d="M50 95.97H11.773a7.778 7.778 0 0 1-6.7-3.879 7.763 7.763 0 0 1-.023-7.737L43.267 7.879a7.76 7.76 0 0 1 6.728-3.887 7.768 7.768 0 0 1 6.728 3.887L94.95 84.354a7.763 7.763 0 0 1-2.862 10.573 7.778 7.778 0 0 1-3.871 1.043H50z" fill="currentColor">
                    </path>
                  </g>
                  <defs>
                    <clipPath id="clip0_123_9159">
                      <path fill="#fff" transform="translate(4 4)" d="M0 0h92v92H0z">
                      </path>
                    </clipPath>
                  </defs>
                </svg>
              </template>

              <template is="dom-if" if="[[isEq_(item.shape, shapes_.SQUARE)]]">
                <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                  <path fill="#fff" d="M0 0h100v100H0z">
                  </path>
                  <rect x="4" y="4" width="92" height="92" rx="8"
                    fill="currentColor">
                  </rect>
                </svg>
              </template>
            </div>
            <span>[[item.digit]]</span>
          </div>
        </template>
      </div>
      <div slot="bottom-buttons">
        <oobe-next-button on-click="onNextClicked_"></oobe-next-button>
      </div>
    </oobe-adaptive-dialog>
  </template>
  <script src="quick_start.js"></script>
</dom-module>
